/* styles.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%; /* 使页面的高度为100% */
}

.container {
    width: 80%; /* 设置宽度为80% */
    height: 70%; /* 设置高度为70% */
    background-color: black; /* 背景颜色为黑色 */
    color: white; /* 文字颜色为白色 */
    border-radius: 15px; /* 设置圆角 */
    display: flex; /* 使用 Flexbox 进行居中对齐 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    margin: auto; /* 使用 margin: auto 实现上下左右居中 */
	padding: 10%;
	margin-top: 10%;
}

h1, p {
    text-align: center; /* 文字居中对齐 */
	color: white;
}

/* ----------------------------------------------------------------------------- */
.button-container {
    perspective: 1000px; /* 创建一个 3D 透视效果 */
}


.start-button {
    padding: 15px 30px;
    font-size: 20px;
    color: #ffffff; /* 按钮文字颜色 */
    background-color: #afafaf; /* 按钮背景颜色 */
    border: none;
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -5px 15px rgba(255, 255, 255, 0.2); /* 外部阴影和内部阴影 */
    transition: transform 0.2s, box-shadow 0.2s; /* 平滑过渡效果 */
    cursor: pointer;

}

.start-button:hover {
    transform: translateY(-4px); /* 鼠标悬停时上升 */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), inset 0 -5px 15px rgba(255, 255, 255, 0.3); /* 鼠标悬停时增加阴影 */
}

.start-button:active {
    transform: translateY(2px); /* 点击时按钮下沉 */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3), inset 0 -5px 15px rgba(255, 255, 255, 0.2); /* 点击时恢复阴影 */
}

/* ----------------- */
.mui-btn-grey{
	color: grey;
	font-weight: bolder;
	width: 80%;
	margin:10px auto;
	border-radius: 20px;
}